<template>
  <view>
    <!-- 遮罩层 -->
    <view class="zhezhao"></view>
    <!-- 头部图片 -->
    <view class="top_box">
      <!-- 自定义导航条 -->
      <u-navbar title="今日推荐" title-size="48" back-icon-color="#fff" title-color="#fff" :border-bottom="false"
        :background="background" z-index="999"></u-navbar>
    </view>
    <!-- 配料表 -->
    <view class="tj_card">
      <!-- 介绍 -->
      <view class="jieshao">
        <view class="js_title">北欧沙拉</view>
        <view class="js_content">
          手抓饼是从葱抓饼演变而来，起源于中国台湾地区。新鲜出炉后的手抓饼，千层百叠，层如薄纸，用手抓之，面丝千连，其外层金黄酥脆，内层柔软白嫩。
        </view>
      </view>
      <!-- 配料 -->
      <view class="mixture">
        <view class="pl_title">食物原料</view>
        <!-- 配料成分 -->
        <view class="pl_item">
          <image src="https://img.js.design/assets/img/641e76dcf92e222c055f5654.png" mode=""></image>
          <view class="item_r">
            <view class="item_r_name">饼</view>
            <view class="item_r_count">1.0个</view>
          </view>
        </view>
       
        <view class="pl_item">
          <image src="https://img.js.design/assets/img/641e77694e8874d2ce08a02c.png" mode=""></image>
          <view class="item_r">
            <view class="item_r_name">煎鸡蛋</view>
            <view class="item_r_count">1.0个</view>
          </view>
        </view>
        
        <view class="pl_item">
          <image src="https://img.js.design/assets/img/641e77f6cece21d6b63cffa1.png" mode=""></image>
          <view class="item_r">
            <view class="item_r_name">生菜</view>
            <view class="item_r_count">1.0片</view>
          </view>
        </view>
        
        <view class="pl_item">
          <image src="https://img.js.design/assets/img/641e7851cb964223d1d9896d.png" mode=""></image>
          <view class="item_r">
            <view class="item_r_name">番茄酱</view>
            <view class="item_r_count">1.0克</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        background: {
          backgroundColor: 'rgba(0,0,0,0)',
        }
      };
    }
  }
</script>

<style lang="scss">
  .zhezhao {
    position: absolute;
    top: 0;
    width: 100%;
    height: 600rpx;
    background: linear-gradient(180deg, rgba(114, 114, 114, 0.8) 0%, rgba(204, 204, 204, 0) 100%);
    z-index: 99;
  }

  .top_box {
    width: 100%;
    height: 770rpx;
    background-image: url('https://img.js.design/assets/img/641e6b0f7c814c19c7ce5866.png');
    background-size: cover;
    background-position: center;
  }

  // 配料表
  .tj_card {
    position: relative;
    top: -98rpx;
    width: 100%;
    padding-bottom: 30rpx;
    border-top-left-radius: 48rpx;
    border-top-right-radius: 48rpx;
    background: rgba(255, 255, 255, 1);
    // box-shadow: 0px 4rpx 8rpx 0px rgba(0, 0, 0, 0.25);

    // 介绍
    .jieshao {
      padding-top: 40rpx;
      // 餐品名称
      .js_title {
        font-size: 48rpx;
        font-weight: 700;
        margin-left: 82rpx;
        color: rgba(73, 69, 75, 1);
        &::before {
          content: "";
          display: inline-block;
          margin-right: 14rpx;
          width: 8rpx;
          height: 28rpx;
          background: rgba(210, 143, 94, 1);
        }
      }
      // 内容
      .js_content{
        width: 626rpx;
        // height: 288rpx;
        font-size: 28rpx;
        font-weight: 400;
        margin: 0 auto;
        margin-top: 56rpx;
        text-indent: 2em;
        color: rgba(73, 69, 75, 1);
      }
    }
    // 配料
    .mixture{
      width: 690rpx;
      height: 674rpx;
      border-radius: 32rpx;
      margin: 0 auto;
      margin-top: 74rpx;
      padding: 34rpx 54rpx;
      background: rgba(245, 246, 250, 1);
      // 标题
      .pl_title{
        font-size: 40rpx;
        font-weight: 400;
        margin-bottom: 60rpx;
        color: rgba(73, 69, 75, 1);
      }
      // 配料成分
      .pl_item{
        display: flex;
        height: 100rpx;
        margin-bottom: 30rpx;
        image{
          width: 110rpx;
          height: 100rpx;
          border-radius: 16rpx;
        }
        .item_r{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
          margin-left: 60rpx;
          font-size: 28rpx;
          font-weight: 400;
          .item_r_name{
            color: rgba(73, 69, 75, 1);
          }
          .item_r_count{
            color: rgba(167, 167, 167, 1);
          }
        }
      }
    }
  }
</style>
